<template>
	<el-dialog
		:title="`代理${curData.proxyName}的德州保险盈亏分成`"
		:visible="visible"
		width="1200px"
		class="rempadding"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<el-divider></el-divider>
		<el-row class="contentBox">
			<el-col :span="5">代理账号: {{ curData.proxyName }}</el-col>
			<el-col :span="4">代理层级: {{ curData.proxyLevel }}</el-col>
			<el-col :span="5">直属上级: {{ curData.parentProxyName }}</el-col>
			<el-col :span="5">总代理: {{ curData.topProxyName }}</el-col>
			<el-col :span="5">
				业务模式:
				{{ mappingBusinessModel(businessModelData.businessModel) }}
			</el-col>
		</el-row>
		<div class="contentBox mt30">特别说明:</div>
		<div class="contentBox">
			应发盈亏分成=团队盈亏分成-下级代理团队盈亏分成
		</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="data"
			style="width: 100%; margin: 15px 0"
			:header-cell-style="getRowClass"
			:max-height="tableHeight"
			highlight-current-row
		>
			<el-table-column align="center" label="项目">
				德州保险
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="德州保险会员输赢"
			>
				<template slot-scope="scope">
					{{ handleTotalNumber('USDT', scope.row.netAmount) }}
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="团队占成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.zhanchengRate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="团队盈亏分成"
			>
				<template slot-scope="scope">
					<p
						:style="
							handleNumberColor(scope.row.commissionNetAmount)
						"
					>
						{{
							handleTotalNumber(
								'USDT',
								scope.row.commissionNetAmount
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="下级代理团队盈亏分成"
			>
				<template slot-scope="scope">
					<p
						:style="
							handleNumberColor(scope.row.underProxyNetAmount)
						"
					>
						{{
							handleTotalNumber(
								'USDT',
								scope.row.underProxyNetAmount
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="应发盈亏分成"
			>
				<template slot-scope="scope">
					<p :style="handleNumberColor(scope.row.incomeNetAmount)">
						{{
							handleTotalNumber('USDT', scope.row.incomeNetAmount)
						}}
					</p>
				</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'

export default {
	components: {},
	mixins: [list],
	props: {
		curData: {
			type: Object,
			default: {}
		},
		visible: {
			type: Boolean,
			default: false
		},
		handleVisible: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			businessModelData: '',
			loading: false,
			tableHeight: 480,
			data: []
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		// 获取代理账号信息
		getData() {
			this.loading = true
			this.$api
				.proxyIncomeAuditDetail({ id: this.curData.orderNo })
				.then((res) => {
					this.loading = false
					this.data =
						(res.data.fundsAuditDetailRespList &&
							res.data.fundsAuditDetailRespList.filter((ele) =>
								ele.venueName.includes('俱乐部')
							)) ||
						[]
				})
				.catch(() => {
					this.loading = false
				})
			// 获取业务模式
			this.$api
				.getProxyDetailQueryDetail({
					merchantId: this.curData.merchantId,
					userName: this.curData.proxyName
				})
				.then((res) => {
					if (res?.code === 200) {
						this.businessModelData = res.data || {}
					}
				})
		},
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .rempadding .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;
	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentBox,
	form {
		padding: 0 20px;
	}
}

::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
</style>
